<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="测站分类" prop="stClassification">
        <el-select v-model="queryParams.stClassification" placeholder="测站分类"
                   @change="getAllStation" clearable size="small" :style="{width: '100%'}">
          <el-option v-for="dict in dict.type.st_classification"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="测站类型" prop="stType">
        <el-select v-model="queryParams.stType" placeholder="测站类型"
                   @change="getAllStation" clearable size="small" :style="{width: '100%'}">
          <el-option v-for="dict in dict.type.st_type"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="测站名称" prop="stCode">
        <el-select v-model="queryParams.stCode" clearable filterable placeholder="请选择测站">
          <el-option v-for="item in allStationList"
                     :key="item.stCd" :label="item.stName" :value="item.stCd">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报文状态" prop="msgStatus">
        <el-select v-model="queryParams.msgStatus" placeholder="报文状态" clearable
                   size="small" style="width: 240px">
          <el-option v-for="dict in dict.type.msg_status"
                     :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="接收时间" prop="createTimeCn">
        <el-date-picker
          v-model="queryParams.createTimeCn"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="监测时间" prop="monitoringTimeCn">
        <el-date-picker
          v-model="queryParams.monitoringTimeCn"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-if="false"
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getPage"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="page" @selection-change="handleSelectionChange"
              :cell-class-name="onlineClassName">
      <el-table-column label="测站名称" fixed align="center" prop="stInfoConfigEntity.stName" width="200">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleDetailQuery(scope.row)"
          >{{scope.row.stInfoConfigEntity.stName}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="监测时间" fixed align="center" prop="monitoringTime" width="180">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.monitoringTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="原始报文" align="center" prop="msgText" width="200" :show-overflow-tooltip="true"/>
      <el-table-column label="解析结果" align="center" prop="monitorData" :show-overflow-tooltip="true"/>
      <el-table-column label="接收时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="报文状态" align="center" prop="msgStatus" width="150">
        <template slot-scope="scope">
          <div v-for="dict in dict.type.msg_status">
            <span v-if="dict.value === scope.row.msgStatus">{{dict.label}}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPage"
    />

    <el-dialog :visible.sync="detailOpen" :title="title" width="1000px" append-to-body>
      <el-form :model="detailQueryParams" ref="detailQueryForm" :inline="true">
        <el-form-item label="接收时间" prop="time" placeholder="选择日期">
          <el-date-picker
            v-model="detailQueryParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDetailQuery">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="detailPage" :cell-class-name="onlineClassName">
        <el-table-column label="监测时间" fixed align="center" prop="monitoringTime" width="180">
          <template slot-scope="scope">
            <span>{{parseTime(scope.row.monitoringTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="原始报文" align="center" prop="msgText" width="200" :show-overflow-tooltip="true"/>
        <el-table-column label="解析结果" align="center" prop="monitorData" :show-overflow-tooltip="true"/>
        <el-table-column label="接收时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{parseTime(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="报文状态" align="center" prop="msgStatus" width="150">
          <template slot-scope="scope">
            <div v-for="dict in dict.type.msg_status">
              <span v-if="dict.value === scope.row.msgStatus">{{dict.label}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="detailTotal>0"
        :total="detailTotal"
        :page.sync="detailQueryParams.pageNum"
        :limit.sync="detailQueryParams.pageSize"
        @pagination="getDetailPage"
      />
    </el-dialog>
  </div>
</template>

<script>
  import {detail, page} from "@/api/dataquery/monitoringdata";
  import {getAllStation} from "@/api/analysisconfigure/stationaccess";
  import {getAllElementGroup, getElementGroupList,} from "@/api/analysisconfigure/elementgroup";
  import {getAnalysisGroupListByStCd,} from "@/api/analysisconfigure/stanalysisgroup";
  import {parseTime} from "@/utils/ruoyi";

  export default {
    dicts: ['msg_status', 'st_type', 'st_classification'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        page: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        dialogType: '',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          stCode: undefined,
          stClassification: undefined,
          stType: undefined,
          msgStatus: undefined,
          createTimeCn: new Date(),
          monitoringTimeCn: undefined
        },
        allStationList: [],
        allElementGroupList: [],
        // 表头数据
        tableHead: [],
        groupReadonly: true,

        detailOpen: false,
        detailPage: null,
        detailQueryForm: null,
        detailQueryParams: {
          pageNum: 1,
          pageSize: 10,
          time: [],
          stCode: undefined
        },
        rowEntity: {
          stCode: "",
          stName: ""
        },
        detailLoading: true,
        detailTotal: 0
      };
    },
    created() {
      this.getPage();
      this.getAllStation();
      this.getAllElementGroup();
    },
    methods: {
      /** 查询分页列表 */
      async getPage() {
        this.loading = true;
        let pageData = [];
        await page(this.queryParams).then(response => {
          pageData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        this.page = pageData;
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      onlineClassName({row, column, rowIndex, columnIndex}) {
        if ("stInfoConfigEntity.stName" === column.property) {
          if (row.stOnlineStatusEntity == null || row.stOnlineStatusEntity.onlineStatus !== 'online') {
            return 'warning-cell';
          } else {
            return 'success-cell';
          }
        }
        return "";

      },
      // 表单重置
      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          stCode: undefined,
          stClassification: undefined,
          stType: undefined,
          msgStatus: undefined,
          createTimeCn: new Date(),
          monitoringTimeCn: undefined
        };
        this.detailOpen = false
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getPage();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      /** 查询所有接入测站列表 */
      getAllStation() {
        getAllStation(this.queryParams).then(response => {
          this.allStationList = response.data;
        });
      },
      /** 查询所有接入解析组列表 */
      getAllElementGroup() {
        getAllElementGroup().then(response => {
          this.allElementGroupList = response.data;
          this.queryParams.analysisGroupId = "";
        });
      },
      handleDetailQuery(row) {
        let rowEntity = this.rowEntity;
        if (row.stInfoConfigEntity !== null && row.stInfoConfigEntity !== undefined) {
          rowEntity.stName = row.stInfoConfigEntity.stName;
          rowEntity.stCode = row.stCode;
        }
        this.title = "\"" + rowEntity.stName + "\"站 -- 历史数据查询";
        let queryTime = this.detailQueryParams.time;
        if (queryTime === null || typeof(queryTime) === "undefined" || queryTime.length < 2) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          queryTime = [];
          queryTime.push(start);
          queryTime.push(end);
        }
        let beginQueryTimeCn = null;
        let endQueryTimeCn = null;
        if (queryTime !== null && typeof(queryTime) !== "undefined" && queryTime.length === 2) {
          beginQueryTimeCn = parseTime(queryTime[0], '{y}-{m}-{d}');
          endQueryTimeCn = parseTime(queryTime[1], '{y}-{m}-{d}');
        }
        this.detailQueryParams = {
          stCode: rowEntity.stCode,
          pageNum: 1,
          pageSize: 10,
          beginQueryTimeCn: beginQueryTimeCn,
          endQueryTimeCn: endQueryTimeCn,
          time: queryTime
        };
        this.getDetailPage();
      },
      getDetailPage() {
        this.detailOpen = true;
        this.detailLoading = true;
        detail(this.detailQueryParams).then(response => {
          this.detailPage = response.rows;
          this.detailTotal = response.total;
          this.detailLoading = false;
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/user/export', {
          ...this.queryParams
        }, `user_${new Date().getTime()}.xlsx`)
      },
    }
  };
</script>
<style>
  .el-table .warning-cell {
    color: #F56C6C;
  }

  .el-table .success-cell {
    color: #67C23A;
  }
</style>
